<style scoped>
.scroll_list_con {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  padding-top: 40px;
}
.table_title{
  min-width: 100%;
  position: absolute;
  top: -1px;
  left: 0;
  background: #001D74;
  color: #0DB8FF;
  font-size: 1.5vh;
  font-weight: bold;
  z-index: 1;
  
}
.table_title_no_bg .table_title{
  background:none;
}
.real_list{
  position: relative;
  height: 100%;
  /* overflow: hidden; */
}
.scroll_list {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  color: #fff;
  z-index: 0;
  /* transition: all .1s; */
  font-size: 1.5vh;
}

.scroll_list_item>*, .table_title>*{
  display: inline-block;
}
.anim {
  transition: all 0.05s;
  margin-top: -30px;
}
</style>
<template>
  <div :class="['scroll_list_con',listClass]" :style="{paddingTop: lineHeight+'px',overflowY: isAutoScroll?'hidden':'auto'}">
    <div class="table_title " :style="{lineHeight: lineHeight+'px',height: lineHeight+'px',width: width}">
      <div class="text_overflow text_center" 
      :class="['text_overflow',col.thClass]" 
      v-for="(col,j) in columns" :key="j" 
      :style="{ width: col.width||defaultWidth,color:col.thColor||''}">{{ col.title }}</div>
    </div>
    <div class="real_list" ref="realList" >
      <div
        ref="scrollList"
        id="scrollList"
        class="scroll_list"
        :style="{top: tableScrollTop+'px',transition:(tableScrollTop==0?'all .1s':'all .1s')}"
        @mouseenter="mEnter"
        @mouseleave="mLeave"
        v-if="listDatas&&listDatas.length>0"
      >
        <div v-for="(item,i) in listDatas" :key="i" class="scroll_list_item " :style="{lineHeight: lineHeight+'px',width: width}" >
          <div class="text_overflow text_center" 
          @click="cellClick(col.field,item)"
            :class="['text_overflow',(dataFieldClass(item[col.field],col.tdClass))]"
            v-for="(col,j) in columns" :key="j" 
            :style="{ width: col.width||defaultWidth,color:col.tdColor||''}">
            <span v-if="col.type&&col.type=='index'">{{ i+1 }}</span>
            <span v-else>{{(col.datas?(col.datas[item[col.field]]):item[col.field]) ||0 }}</span>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "ScrollList",
  props: {
    //   config: Object,
    // maxLength: {
    //   default: 2,
    //   type: Number,
    // },
    lineHeight: {
      //px
      default: 30,
      type: Number,
    },
    datas: Array,
    columns: Array,
    listClass: {
      type: String | Array,
      default: "",
    },
    isAutoScroll:{
      default: true,
      type: Boolean
    },
    speed: {
      //滚动速度，秒
      default: 1,
      type: Number,
    },
  },
  data() {
    return {
      tableScrollInterval: null,
      nowIndex: 0,
      maxLength:0,
    };
  },
  computed: {
    width(){
      let widDatas = this.columns.filter(item=>(item.width&&item.width.indexOf('px')>-1));
      if(widDatas.length == this.columns.length){
        let total = 0;
        this.columns.map(item=>{
          total += parseInt(item.width)
        })
        return total+'px'
      }else{
        return '100%'
      }

    },
    tableScrollTop() {
      return - (this.nowIndex * this.lineHeight);
    },
    dataLength(){
        return JSON.parse(JSON.stringify(this.datas)).length;
    },
    listDatas(){
      
        var datas = JSON.parse(JSON.stringify(this.datas));
        var yu = this.maxLength - (datas.length % this.maxLength);
        // for (var i = 0; i < yu; i++) {
        //     datas.push(this.datas[i]);
        // }
        if(this.isAutoScroll){
        datas = datas.concat(datas);
        }
        return datas;
    },
    defaultWidth(){
      if(this.columns.length>8){
        return 'auto'
      }
      let widTotal = 0;
      let widDatas = this.columns.filter(item=>(item.width&&item.width.indexOf('px')>-1))
      widDatas.map(item=>{
        widTotal += parseInt(item.width)
      });
      // return parseInt(100/this.columns.length)+'%'
      if(widDatas.length>0){
        return 'calc((100% - '+widTotal+'px) / '+(this.columns.length-widDatas.length) + ')'
      }else{
        return parseInt(100/this.columns.length)+'%'
      }
      
    }
  },
  watch:{
    datas:{
      handler(val){
        if(val){
          this.init();
        }
      },
      deep:true
    }
  },
  methods: {
    dataFieldClass(value,classData){
      if(typeof classData == 'string'){
        return classData;
      }else if(typeof classData == 'object'){
        return classData[value] || '';
      }

    },
    init() {
      if(this.isAutoScroll){
        this.initTableScroll();
      }
      
    },
    initTableScroll() {
      var that = this;
      clearInterval(this.tableScrollInterval);
      this.animate = true;
      this.tableScrollInterval = setInterval( ()=> {
        this.nowIndex++;
        if (this.nowIndex >= this.dataLength) {
          this.nowIndex = 0;
        }
        // var parent = document.getElementById('scrollList');
        // var first = parent.children[0];
        // var second = parent.children[1];
        // parent.removeChild(first);
        // parent.removeChild(second);
        // parent.appendChild(first);
        // parent.appendChild(second);
        // this.animate = false;
      }, this.speed * 1000);
    },
    mEnter() {
      clearInterval(this.tableScrollInterval);
    },
    mLeave() {
      var that = this;
      this.tableScrollInterval = setInterval(()=> {
        this.nowIndex++;
        if (this.nowIndex >= this.dataLength) {
          this.nowIndex = 0;
        }
      }, this.speed * 1000);
    },
    cellClick(field,row) {
      this.EventBus.$emit("handleTableClick", {
        field: field,
        data: row,
      });
    },
  },
  created() {
    if(this.datas && this.datas.length>0){
      this.init();
    }
    
  },
  mounted(){
    this.maxLength = parseInt(this.$refs.realList.offsetHeight/this.lineHeight)
  },
  beforeDestroy(){
    console.log('beforeDestroy')
    clearInterval(this.tableScrollInterval)
  }
};
</script>